<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="model.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div v-loading="formLoading">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :hideRequiredMark="model.text == '查看' ? true : false"
        >
          <!-- 目录编码   （编辑页面时此字段不可编辑） -->
          <a-form-model-item ref="menuCode" label="目录编码" prop="menuCode">
            <a-input
              v-model="form.menuCode"
              placeholder="请输入目录编码"
              :disabled="model.id ? true : false"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- 目录名称 -->
          <a-form-model-item ref="menuName" label="目录名称" prop="menuName">
            <a-input
              v-model="form.menuName"
              placeholder="请输入目录名称"
              :disabled="model.text == '查看' ? true : false"
              :maxLength="50"
            />
          </a-form-model-item>
          <!-- pc是否展示 -->
          <a-form-model-item ref="pcShow" label="pc是否展示" prop="pcShow">
            <a-radio-group
              v-model="form.pcShow"
              :disabled="model.text == '查看' ? true : false"
            >
              <a-radio value="0"> 是 </a-radio>
              <a-radio value="1"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <!-- app是否展示 -->
          <a-form-model-item ref="appShow" label="app是否展示" prop="appShow">
            <a-radio-group
              v-model="form.appShow"
              :disabled="model.text == '查看' ? true : false"
            >
              <a-radio value="0"> 是 </a-radio>
              <a-radio value="1"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <!-- app菜单图标 -->
          <a-form-model-item label="app菜单图标">
            <a-input
              v-model.trim="form.appModulPath"
              :placeholder="model.text == '查看' ? '' : '请输入app菜单图标'"
              :disabled="model.text == '查看' ? true : false"
            />
          </a-form-model-item>
          <!-- 排序 -->
          <a-form-model-item ref="sort" label="排序" prop="sort">
            <a-input
              v-model="form.sort"
              type="number"
              placeholder="请输入排序"
              :disabled="model.text == '查看' ? true : false"
              :maxLength="11"
            />
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="form-footer flex">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button
          type="primary"
          :loading="loading"
          @click="onSubmit"
          v-if="model.text != '查看'"
        >
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
//【新增目录】
import {
  getTenantPermissionMLAdd,
  getTenantPermissionDetails,
  getTenantUpdate,
} from "@/api/user-center/tenantManage.js";
import { notificationTip } from "@/utils";
export default {
  name: "addDirectoryModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //目录编码
        menuCode: "",
        //目录名称
        menuName: "",
        //pc是否展示
        pcShow: "0",
        //app是否展示
        appShow: "0",
        //排序
        sort: "0",
        //app菜单图标
        appModulPath: "",
      },
      formLoading: false,
      rules: {
        menuCode: [
          { required: true, message: "请输入目录编码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]+$/,
            message: "只能输入英文字母，数字，下划线，中划线",
          },
        ],
        menuName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
        ],
        pcShow: [
          { required: true, message: "请选择pc是否展示", trigger: "change" },
        ],
        appShow: [
          { required: true, message: "请选择app是否展示", trigger: "change" },
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    //详情
    getDetail() {
      this.formLoading = true;
      let { id } = this.model;
      getTenantPermissionDetails(id)
        .then((res) => {
          let { data } = res;
          this.form = {
            //目录编码
            menuCode: data?.result?.menuCode || "",
            //目录名称
            menuName: data?.result?.menuName || "",
            //pc是否展示
            pcShow: data?.result?.pcShow.toString() || "",
            //app是否展示
            appShow: data?.result?.appShow.toString() || "",
            //排序
            sort: data?.result?.sort,
            //app菜单图标
            appModulPath: data?.result?.appModulPath,
          };
        })
        .catch((_) => {})
        .finally((_) => {
          this.formLoading = false;
        });
    },
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { id, text } = this.model;
          let { tenantCode } = this.$route.query;
          let formJson = {
            //目录编码
            menuCode: form.menuCode,
            //目录名称
            menuName: form.menuName,
            //排序
            sort: form.sort,
            //pc是否展示
            pcShow: form.pcShow,
            //app是否展示
            appShow: form.appShow,
            tenantCode,
            //app菜单图标
            appModulPath: form.appModulPath,
          };
          if (id) {
            formJson.id = id;
            formJson.menuTypeValue = "1"; //目录是1
            getTenantUpdate(formJson)
              .then((res) => {
                notificationTip("success", text + "成功！");
                this.closeModal();
                this.$parent.getTableData();
              })
              .catch((_) => {})
              .finally((_) => {
                this.loading = false;
              });
          } else {
            getTenantPermissionMLAdd(formJson)
              .then((res) => {
                notificationTip("success", text + "成功！");
                this.closeModal();
                this.$parent.getTableData();
              })
              .catch((_) => {})
              .finally((_) => {
                this.loading = false;
              });
          }
        }
      });
    },
    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
    //重置表单
    resetForm() {
      this.form = {
        //目录编码
        menuCode: "",
        //目录名称
        menuName: "",
        //pc是否展示
        pcShow: "0",
        //app是否展示
        appShow: "0",
        //排序
        sort: "0",
        //app菜单图标
        appModulPath: "",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 60px 20px 40px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 110px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
